<template>
    <div>
        <input type="text" placeholder="账号" v-model="user.account">
        <input type="text" placeholder="密码" v-model="user.password">
        <input type="text" placeholder="邮箱" v-model="user.email">
    </div>
    <div>
        <button @click="Register">注册</button>
        <!-- 一个选择框 -->
        <div>
        TEXT
        {{ num.str }}
        <input type="text" placeholder="输入答案以完成验证" v-model="num.d">
        {{ num.d }}
    </div>
    </div>
</template>

<script setup>
import { reactive, ref, inject, onMounted } from 'vue';
import { epStore } from "../common/store.js";
import { storeToRefs } from "pinia";
import { NCheckbox } from "naive-ui"
import TopNav from "./TopNav.vue"
import { useRouter, useRoute } from 'vue-router'


const axios = inject("axios")
const user = reactive({
    account: null,
    password: null,
    email: null
})
const store_data = epStore()
const router = useRouter()


const Register = async () => {

    // 在此检验表单
    // 自动填写校验码？混淆即可
    // 一种临时解决方案 使用算式
    if (!numVerify()) {
        randomNum()
        console.log("算错拉！再来一遍");
        return ;
    }

    let data = {
        user_account: user.account,
        user_password: user.password,
        user_email: user.email
    }
    let res = await axios.post("/login/register", data)

    if (res.data.code === 200) {
        console.log("申请成功 等待审核");
        await router.push("/home");
    }

}

const num = reactive({
    a: null,
    b: null,
    c: null,
    d: null,
    str: null
})

function randomNum() {
    num.a = Math.round(Math.random() * 100)
    num.b = Math.round(Math.random() * 10)
    num.str = num.a + "+" + num.b + "="
    num.c = num.a + num.b;
}

function numVerify() {
    if (num.c == num.d) {
        return true;
    } else {
        return false;
    }
}

onMounted(() => {
    randomNum()
})

</script>

<style lang="scss" scoped>

</style>